<template>
  <div style="padding: 10px">
    <Table size="small" :data="groups" :columns="columns"></Table>
    <Modal width="768"
           v-model="transferModal"
           title="成员管理"
           @on-ok="saveGroupNumbers"
           ok-text="保存"
           @on-cancel="transferModal = false">
      <Transfer
        :data="data"
        :target-keys="targetKeys"
        :titles="title"
        :list-style="listStyle"
        @render-format="render"
        filterable
        @on-change="handleChange">
      </Transfer>
    </Modal>
  </div>
</template>
<script>
  export default {
    props: {
      id: Number
    },
    data() {
      return {
        title: ['未添加成员', '已有成员'],
        transferModal: false,
        groups: [],
        columns: [
          {
            title: "组名",
            key: "name"
          },
          {
            title: "描述",
            key: "note"
          },
          {
            title: "操作",
            key: "action",
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    'margin-right': '5px'
                  },
                  on: {
                    click: () => {
                      this.groupManage(params.row)
                    }
                  }
                }, '成员管理'),
                h('Button', {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.deleteGroup(params.row)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
        data: [],
        targetKeys: [],
        listStyle: {
          margin: '0 auto',
          width: '320px',
          height: '300px'
        },
        currentGroupId: null
      }
    },
    methods: {
      getGroups() {
        $.get('../api/systemmanage/getGroupsBySystem', {
          systemId: this.id
        }, (data) => {
          if (data.code === 400) {
            this.$Notice.warning({
              title: '数据拉取失败'
            });
          } else {
            this.groups = data
          }
        }, 'json')
      },
      groupManage(row) {
        this.currentGroupId = row.userGroupId;
        $.get('../api/systemmanage/groupmanage/selectGroupMembers', {
          groupId: row.userGroupId
        }, (data) => {
          if (data.code === 400) {
            this.$Notice.warning({
              title: '获取信息失败',
            });
          } else {
            this.transferModal = true;
            let array = [];
            let targets = [];
            if (data.currentGroupMembers.length > 0) {
              data.currentGroupMembers.forEach((person) => {
                targets.push(person.userName,)
              });
            }
            let allMembers = data.currentGroupMembers.concat(data.otherMembers);
            allMembers.forEach((person) => {
              array.push({
                key: person.userName,
                label: person.realName
              })
            });
            this.data = array;
            this.targetKeys = targets;
          }
        }, 'json');
      },
      render(item) {
        return item.label;
      },
      handleChange(newTargetKeys, direction, moveKeys) {
        this.targetKeys = newTargetKeys;
      },
      saveGroupNumbers() {
        let obj = {
          userGroupId: this.currentGroupId,
          userNames: this.targetKeys
        };
        $.ajax("../api/systemmanage/groupmanage/groupMemberManage", {
          method: "post",
          contentType: "application/json;charset=utf-8",
          data: JSON.stringify(obj),
          success: (data) => {
            if (data.code === 200) {
              this.transferModal = false
            }
          }
        })
      },
      deleteGroup(row) {
        $.post('../api/systemmanage/groupmanage/removeGroup/' + row.userGroupId, {}, (data) => {
          if (data.code === 200) {
            this.$Notice.success({
              title: '用户组删除成功',
            });
            this.getGroups()
          } else {
            this.$Notice.error({
              title: '用户组删除失败',
            });
          }
        }, 'json')
      }
    },
    mounted() {
      this.getGroups()
    }
  }
</script>
